<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Request | Framework7 Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Request | Framework7 Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App HTML Layout</a></li>
                <li><a href="rtl-layout.html">RTL Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Events</div>
              <ul>
                <li><a href="events.html">Events</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Router / Navigation</div>
              <ul>
                <li><a href="routes.html">Routes</a></li>
                <li><a href="router-component.html">Router Component</a></li>
                <li><a href="view.html#router-api-methods-properties">Router API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Components</div>
              <ul>
                <li><a href="app.html">App / Core</a></li>
                <li><a href="accordion.html">Accordion / Collapsible</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="autocomplete.html">Autocomplete</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="calendar.html">Calendar / Datepicker</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="data-table.html">Data Table</a></li>
                <li><a href="dialog.html">Dialog</a></li>
                <li><a href="elevation.html">Elevation</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="form.html">Form Data / Storage</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icons.html">Icons</a></li>
                <li><a href="infinite-scroll.html">Infinite Scroll</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="lazy-load.html">Lazy Load</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="notification.html">Notification</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="picker.html">Picker</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="pull-to-refresh.html">Pull to Refresh</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable-list.html">Sortable List</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="timeline.html">Timeline</a></li>
                <li><a href="toast.html">Toast</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="tooltip.html">Tooltip</a></li>
                <li><a href="vi.html">Video Intelligence (vi)</a></li>
                <li><a href="view.html">View / Router</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Framework7 Icons</div>
              <ul>
                <li><a href="/icons/">Framework7 Icons Cheatsheet</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Styling</div>
              <ul>
                <li><a href="iphone-x.html">iPhone X</a></li>
                <li><a href="color-themes.html">Color Themes</a></li>
                <li><a href="typography.html">Typography</a></li>
                <li><a href="hairlines.html">Hairlines</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Dom7</div>
              <ul>
                <li><a href="dom7.html">Dom7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Template7</div>
              <ul>
                <li><a href="template7.html">Template7</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Fast Clicks</div>
              <ul>
                <li><a href="fast-clicks.html">Fast Clicks</a></li>
                <li><a href="active-state.html">Active State</a></li>
                <li><a href="tap-hold.html">Tap Hold Event (Long Tap)</a></li>
                <li><a href="touch-ripple.html">Touch Ripple (MD Theme)</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Utilities</div>
              <ul>
                <li><a href="request.html">Request / Ajax</a></li>
                <li><a href="utils.html">Utils</a></li>
                <li><a href="device.html">Device</a></li>
                <li><a href="support.html">Support</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Plugins API</div>
              <ul>
                <li><a href="plugins-api.html">Plugins API</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Lazy Modules</div>
              <ul>
                <li><a href="lazy-modules.html">Lazy Modules</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Custom Build</div>
              <ul>
                <li><a href="custom-build.html">Custom Build</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Request / Ajax</h1>
          <ul class="docs-index"></ul>
          <p>Framework7 comes with handy Request library to work with XHR requests (Ajax) right from the box.</p>
          <p>It is available as a <code><b>request</b></code> property of Framework7 class (<code>Framework7.request</code>) and same property on initialized app instance (<code>app.request</code>):</p><pre><code class="js"><span class="token comment">// If we need it in place where we don't have access to app instance or before we init the app</span>
Framework7<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'somepage.html'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>


<span class="token comment">// After we init the app we can access it as app instance property</span>
<span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">/*...*/</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'somepage.html'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>API</h2>
          <div class="method-wrap">
            <p><span class="method">app.request(<span>parameters</span>)</span><span>- Load data from the server</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span> - Request parameters</li>
            </ul>
            <p class="method-returns">Returns plain XHR object</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">Framework7.request(<span>parameters</span>)</span><span>- Load data from the server</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span> - Request parameters</li>
            </ul>
            <p class="method-returns">Returns plain XHR object</p>
          </div>
          <p>Let's look at the list of available parameters</p>
          <table class="params-table">
            <thead>
              <tr>
                <th>Parameter</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>url</td>
                <td>string</td>
                <td> </td>
                <td>Request url</td>
              </tr>
              <tr>
                <td>async</td>
                <td>boolean</td>
                <td>true</td>
                <td>If you need synchronous requests, set this option to <code>false</code></td>
              </tr>
              <tr>
                <td>method</td>
                <td>string</td>
                <td>GET</td>
                <td>Request method (e.g. "POST", "GET", "PUT")</td>
              </tr>
              <tr>
                <td>cache</td>
                <td>boolean</td>
                <td>true</td>
                <td>If set to false, it will force requested pages not to be cached by the browser. Setting cache to false will only work correctly with HEAD and GET requests. It works by appending <code>_nocache={timestamp}</code> to the GET parameters</td>
              </tr>
              <tr>
                <td>contentType</td>
                <td>string</td>
                <td>application/x-www-form-urlencoded</td>
                <td>Content type. Also could be <code>multipart/form-data</code> or <code>text/plain</code>. For cross-domain requests, setting the content type to anything other than application/x-www-form-urlencoded, multipart/form-data, or text/plain will trigger the browser to send a preflight OPTIONS request to the server</td>
              </tr>
              <tr>
                <td>crossDomain</td>
                <td>boolean</td>
                <td></td>
                <td>If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true. When <code>true</code> additional <code>X-Requested-With: XMLHttpRequest</code> header will not be added to request. By default it will try to guess depending on app and request hosts</td>
              </tr>
              <tr>
                <td>data</td>
                <td>object<br>string<br>array</td>
                <td></td>
                <td>Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. For POST requests could be <code>FormData</code> instance</td>
              </tr>
              <tr>
                <td>processData</td>
                <td>boolean</td>
                <td>true</td>
                <td>By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to <code>false</code></td>
              </tr>
              <tr>
                <td>dataType</td>
                <td>string</td>
                <td>text</td>
                <td>The type of data that you're expecting back from the server. Could be <code>text</code> or <code>json</code></td>
              </tr>
              <tr>
                <td>headers</td>
                <td>object</td>
                <td></td>
                <td>An object of additional header key/value pairs to send along with requests using the XMLHttpRequest transport. For example:</td>
              </tr>
              <tr>
                <td>xhrFields</td>
                <td>object</td>
                <td></td>
                <td>An object of key/value pairs to set on the native XHR object</td>
              </tr>
              <tr>
                <td>username</td>
                <td>string</td>
                <td></td>
                <td>A username to be used with XMLHttpRequest in response to an HTTP access authentication request</td>
              </tr>
              <tr>
                <td>password</td>
                <td>string</td>
                <td></td>
                <td>A password to be used with XMLHttpRequest in response to an HTTP access authentication request</td>
              </tr>
              <tr>
                <td>timeout</td>
                <td>number</td>
                <td>0</td>
                <td>Set a timeout (in milliseconds) for the request</td>
              </tr>
              <tr>
                <th colspan="4">Callbacks</th>
              </tr>
              <tr>
                <td>beforeCreate</td>
                <td>function (parameters)</td>
                <td></td>
                <td>A pre-request callback function that can be used to modify passed parameters</td>
              </tr>
              <tr>
                <td>beforeOpen</td>
                <td>function (xhr, parameters)</td>
                <td></td>
                <td>A pre-request callback function that will be called before XHR opened. Can be used to modify XHR object
                  <p class="important-note">If you <code>return false</code> in this callback it will cancel the request</p>
                </td>
              </tr>
              <tr>
                <td>beforeSend</td>
                <td>function (xhr)</td>
                <td></td>
                <td>A pre-request callback function that will be called after XHR opened and before XHR send. Can be used to modify the XHR object before it is sent. Use this callback to set custom headers, etc.
                  <p class="important-note">If you <code>return false</code> in this callback it will cancel the request</p>
                </td>
              </tr>
              <tr>
                <td>error</td>
                <td>function (xhr, status)</td>
                <td></td>
                <td>A function to be called if the request fails</td>
              </tr>
              <tr>
                <td>success</td>
                <td>function (data, status, xhr)</td>
                <td></td>
                <td>A function to be called if the request succeeds</td>
              </tr>
              <tr>
                <td>complete</td>
                <td>function (xhr, status)</td>
                <td></td>
                <td>A function to be called when the request finishes (after success and error callbacks are executed)</td>
              </tr>
              <tr>
                <td>statusCode</td>
                <td>object</td>
                <td></td>
                <td>
                  An object of numeric HTTP codes and functions to be called when the response has the corresponding code. For example, the following will alert when the response status is a 404:<pre><code class="js">app<span class="token punctuation">.</span><span class="token function">request</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  url<span class="token punctuation">:</span> <span class="token string">'somepage.html'</span><span class="token punctuation">,</span>
  statusCode<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token number">404</span><span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">xhr</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'page not found'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</pre></code>
                </td>
              </tr>
            </tbody>
          </table>
          <h2>Shorthand Methods</h2>
          <p>Request comes with some pre configured methods for ease of use.</p>
          <h3>Get</h3>
          <div class="method-wrap">
            <p><span class="method">app.request.get(<span>url</span>, <span>data</span>, <span>success</span>, <span>error</span>, <span>dataType</span>)</span><span>- Load data from the server using a HTTP GET request</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">url</span> - <span class="parameter-type">string</span> - Request url</li>
              <li><span class="parameter">data</span> - <span class="parameter-type">object</span> - A plain object or string that is sent to the server with the request. <em>Optional</em></li>
              <li><span class="parameter">success</span> - <span class="parameter-type">function (data, status, xhr)</span> - A callback function that is executed if the request succeeds. <em>Optional</em></li>
              <li><span class="parameter">error</span> - <span class="parameter-type">function (xhr, status)</span> - A callback function that is executed if the request fails. <em>Optional</em></li>
              <li><span class="parameter">dataType</span> - <span class="parameter-type">string</span> - The type of data that you're expecting back from the server. Could be <code>text</code> or <code>json</code>. <em>Optional</em></li>
            </ul>
            <p class="method-returns">Returns plain XHR object</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">Framework7.request.get(<span>url</span>, <span>data</span>, <span>success</span>, <span>error</span>, <span>dataType</span>)</span><span>- Load data from the server using a HTTP GET request</span></p>
            <p class="method-returns">Returns plain XHR object</p>
          </div>
          <p>For example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span>

app<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token string">'blog-post.php'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> foo<span class="token punctuation">:</span><span class="token string">'bar'</span><span class="token punctuation">,</span> id<span class="token punctuation">:</span><span class="token number">5</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.articles'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Load was performed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h3>Post</h3>
          <div class="method-wrap">
            <p><span class="method">app.request.post(<span>url</span>, <span>data</span>, <span>success</span>, <span>error</span>, <span>dataType</span>)</span><span>- Load data from the server using a HTTP POST request</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">url</span> - <span class="parameter-type">string</span> - Request url</li>
              <li><span class="parameter">data</span> - <span class="parameter-type">object</span> - A plain object or <em>FormData</em> or string that is sent to the server with the request. <em>Optional</em></li>
              <li><span class="parameter">success</span> - <span class="parameter-type">function (data, status, xhr)</span> - A callback function that is executed if the request succeeds. <em>Optional</em></li>
              <li><span class="parameter">error</span> - <span class="parameter-type">function (xhr, status)</span> - A callback function that is executed if the request fails. <em>Optional</em></li>
              <li><span class="parameter">dataType</span> - <span class="parameter-type">string</span> - The type of data that you're expecting back from the server. Could be <code>text</code> or <code>json</code>. <em>Optional</em></li>
            </ul>
            <p class="method-returns">Returns plain XHR object</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">Framework7.request.post(<span>url</span>, <span>data</span>, <span>success</span>, <span>error</span>, <span>dataType</span>)</span><span>- Load data from the server using a HTTP POST request</span></p>
            <p class="method-returns">Returns plain XHR object</p>
          </div>
          <p>For example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span>

app<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'auth.php'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> username<span class="token punctuation">:</span><span class="token string">'foo'</span><span class="token punctuation">,</span> password<span class="token punctuation">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">$$</span><span class="token punctuation">(</span><span class="token string">'.login'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'Load was performed'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h3>Json</h3>
          <div class="method-wrap">
            <p><span class="method">app.request.json(<span>url</span>, <span>data</span>, <span>success</span>, <span>error</span>)</span><span>- Load JSON-encoded data from the server using a GET HTTP request</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">url</span> - <span class="parameter-type">string</span> - Request url</li>
              <li><span class="parameter">data</span> - <span class="parameter-type">object</span> - A plain object or <em>FormData</em> or string that is sent to the server with the request. <em>Optional</em></li>
              <li><span class="parameter">success</span> - <span class="parameter-type">function (data, status, xhr)</span> - A callback function that is executed if the request succeeds. <em>Optional</em></li>
              <li><span class="parameter">error</span> - <span class="parameter-type">function (xhr, status)</span> - A callback function that is executed if the request fails. <em>Optional</em></li>
            </ul>
            <p class="method-returns">Method nothing returns</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">Framework7.request.json(<span>url</span>, <span>data</span>, <span>success</span>, <span>error</span>)</span></p>
            <p class="method-returns">Method returns nothing</p>
          </div>
          <p>For example:</p><pre><code class="js">Framework7<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token string">'items.json'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token string">'users.json'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h3>PostJSON</h3>
          <div class="method-wrap">
            <p><span class="method">app.request.postJSON(<span>url</span>, <span>data</span>, <span>success</span>, <span>error</span>, <span>dataType</span>)</span><span>- Send JSON data using a HTTP POST request</span></p>
            <ul class="method-parameters">
              <li><span class="parameter">url</span> - <span class="parameter-type">string</span> - Request url</li>
              <li><span class="parameter">data</span> - <span class="parameter-type">object</span> - A plain object</li>
              <li><span class="parameter">success</span> - <span class="parameter-type">function (data, status, xhr)</span> - A callback function that is executed if the request succeeds. <em>Optional</em></li>
              <li><span class="parameter">error</span> - <span class="parameter-type">function (xhr, status)</span> - A callback function that is executed if the request fails. <em>Optional</em></li>
              <li><span class="parameter">dataType</span> - <span class="parameter-type">string</span> - The type of data that you're expecting back from the server. Could be <code>text</code> or <code>json</code>. By default is <code>json</code>. <em>Optional</em></li>
            </ul>
            <p class="method-returns">Returns plain XHR object</p>
          </div>
          <div class="method-wrap">
            <p><span class="method">Framework7.request.postJSON(<span>url</span>, <span>data</span>, <span>success</span>, <span>error</span>, <span>dataType</span>)</span><span>- Send JSON data using a HTTP POST request</span></p>
            <p class="method-returns">Returns plain XHR object</p>
          </div>
          <p>For example:</p><pre><code class="js"><span class="token keyword">var</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Framework7</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">var</span> $$ <span class="token operator">=</span> Dom7<span class="token punctuation">;</span>

app<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">postJSON</span><span class="token punctuation">(</span><span class="token string">'http://api.myapp.com'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> username<span class="token punctuation">:</span><span class="token string">'foo'</span><span class="token punctuation">,</span> password<span class="token punctuation">:</span> <span class="token string">'bar'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token built-in">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></pre></code>
          <h2>Request Setup</h2>
          <div class="method-wrap">
            <p><span class="method">app.request.setup(parameters)</span><span>- Set default values for future Ajax requests. <b>Its use is not recommended</b></span></p>
            <ul class="method-parameters">
              <li><span class="parameter">parameters</span> - <span class="parameter-type">object</span> - Default requests parameters</li>
            </ul>
          </div>
          <div class="method-wrap">
            <p><span class="method">Framework7.request.setup(parameters)</span><span>- Set default values for future Ajax requests. <b>Its use is not recommended</b></span></p>
          </div>
          <p>For example:</p><pre><code class="js"><span class="token comment">// After the following setup all XHR requests will have additional 'Autorization' header</span>
Framework7<span class="token punctuation">.</span>request<span class="token punctuation">.</span><span class="token function">setup</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  headers<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token string">'Authorization'</span><span class="token punctuation">:</span> <span class="token string">'sometokenvalue'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></pre></code>
          <h2>Original Request Parameters</h2>
          <p>Each of request methods returns plain XHR object, which is also available in callbacks. This default XHR object is extended with the following properties:</p>
          <table class="methods-table">
            <tbody>
              <tr>
                <td>xhr.requestParameters</td>
                <td>Object with passed XHR request parameters</td>
              </tr>
              <tr>
                <td>xhr.requestUrl</td>
                <td>String with request URL</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>